import { useEffect, useRef } from "react";
import { init, graphic } from "echarts";
import classNames from "classnames";

interface Props {
  className?: string;
  title?: string;
  value: number;
  split?: distance;
  min?: number;
  max?: number;
  angle: [number, number]
}

export default function GaugeChart<Props>(props: Props) {
  const { title, value, angle = [210, -30], split = 10, min=0, max=100 } = props;
  const domRef = useRef(null);

  const initChart = () => {
    const chart = init(domRef.current, "purple");
    chart.setOption({
      title: {
        text: title,
        textStyle: {
          fontSize: 16
        }
      },
      series: [
        {
          type: "gauge",
          startAngle: angle[0],
          endAngle: angle[1],
          min,
          max,
          radius: "96%",
          splitNumber: split,
          center: ['50%', '60%'],
          progress: {
            roundCap: true,
            show: true,
            width: 6,
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 6,
              color: [[1, "#05050F"]],
            },
          },
          detail: {
            valueAnimation: true,
            // fontSize: 80,
            fontSize: 30,
            color: "#ffffff",
          },
          axisTick: {
            distance: 6,
            show: false,
          },
          splitLine: {
            distance: 0,
            length: 5,
            lineStyle: {
              width: 2,
              color: "#999",
            },
          },
          axisLabel: {
            distance: 10,
            color: "#999",
            // fontSize: 20
            fontSize: 16,
          },
          pointer: {

            length: "90%",
            // width: 16,
            offsetCenter: [0, "5%"],
          },
          title: {
            show: false,
          },

          data: [
            {
              value: value,
            },
          ],
        },
      ],
    });
    window.addEventListener("resize", function () {
      chart.resize();
    });
  };

  useEffect(() => {
    initChart();
  }, []);

  const className = classNames("size-full", props.className);

  return <div ref={domRef} className={className}></div>;
}
